<style>
.uplaodImg {
    display: block;
    width: 60px;
    height: 60px;
    border: 1px #dfdfdf dashed;
    text-align: center;
    line-height: 60px;
}

.pro-con-fr {
    text-align: right;
}
</style>

<template>
    <div class="cate-manage">
        <product-title></product-title>
        <div class="pro-con-f">
            <Row>
                <Col span="19" offset='1'>
                <Form ref="" :model="searchForm" inline>
                    <Form-item prop="user">
                        <Input type="text" v-model="searchForm.name" placeholder="分类名称" />
                    </Form-item>
                    <Form-item>
                        <Select v-model="searchForm.from" placeholder="分类来源">
                            <Option value="0">分类来源</Option>
                            <Option value="1">快保家</Option>
                            <Option value="2">本账户</Option>
                        </Select>
                    </Form-item>
                    <Form-item>
                        <Select v-model="searchForm.cateOne" placeholder="一级分类">
                            <Option value="0">一级分类</Option>
                            <Option :value="cate.id" v-for="cate in cateOneAll" :key="cate.id">{{cate.name}}</Option>
                        </Select>
                    </Form-item>
                    <Form-item>
                        <Button type="primary" icon="ios-search" @click="search()">搜索</Button>
                    </Form-item>
                </Form>
                </Col>
                <Col span="3" class="pro-con-fr">
                <Button type="primary" @click="addCate">新增</Button>
                </Col>
            </Row>
        </div>
        <div class="cate-list">
           <!-- <Row>
               <Col span="22" offset='1'> -->
                <Table stripe highlight-row :columns="columns" :data="cateList"></Table>
                <!-- </Col>
           </Row> -->
        </div>
        <Row class="pro-pagesize">
            <Col span="23" offset="1">
            <Page :total="listTotal" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
            </Col>
        </Row>
        <Modal v-model="showEdit" title="编辑" @on-ok="ok" @on-cancel="cancel">
            <Row>
                <Col span="20" offset="1">
                <Form :model="cateEdit" :label-width="80">
                    <Form-item label="名称：">
                        <Input v-model="cateEdit.name" placeholder="请输入"></Input>
                    </Form-item>
                    <Form-item label="父级分类：">
                        <Select v-model="cateEdit.pid" :value="cateEdit.pid" placeholder="请选择">
                            <Option value="0">一级分类</Option>
                            <Option :value="cate.id" v-for="cate in cateOne" :key="cate.id">{{cate.name}}</Option>
                        </Select>
                    </Form-item>
                    <Form-item label="LOGO：">
                        <div>
                            <label for="uploadImg" class='uplaodImg'>
                                <div v-if="haveImage">
                                    <img :src="cateEdit.logo" alt="" width="100%" height="100%">
                                </div>
                                <Icon type="image" v-if="!haveImage" size=20 color="#656464"></Icon>
                            </label>
                            <input type="file" id="uploadImg" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">
                        </div>
                    </Form-item>
                </Form>
                </Col>
            </Row>
        </Modal>
    </div>
</template>
<<script>
import {mapGetters } from 'vuex';
import productTitle from '../../components/productTitle';
import {ProCatelist , getCateDetail ,productCateOneById,productCateOne ,saveCate ,delCate} from '../../api/product';
export default {
    data () {
        return {
            page:1,
            pagesize:10,
            listTotal:0,
            searchForm:{},
            columns: [
                    {
                        type: 'index',
                        title:'序号',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '名称',
                        key: 'name',
                        align: 'center'
                    },
                    {
                        title: '父类名称',
                        key: 'parentName',
                        align: 'center'
                    },
                    {
                        title: '来源',
                        key: 'origin',
                        align: 'center'
                    },
                    {
                        title: 'LOGO',
                        key: 'logo',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('img', {
                                    props: {
                                        size:'small'
                                    },
                                    attrs:{
                                        src:params.row.logo
                                    },
                                    style: {
                                        height:"20px"
                                    },
                                }),
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
            cateList: [],
            showEdit:false, //控制编辑modal的显示
            haveImage:false,
            cateEdit:{
                yun_id:1,
                name:"",
                pid:"",
                logo:"",
                id:""
            },
            cateOne:[], //云账户自己添加的一级分类
            cateOneAll:[], // 云账户自己添加的一级分类和快保家添加的一级分类
        };
    },
    components: {
        productTitle,
    },
    created(){
        this.getCatelist();
        this.getCateOneById();
        this.getCateOne();
    },
    computed:{

    },
    methods: {
        search(){
           this.getCatelist();
        },
        addCate(){
            this.showEdit = true;
        },
        getCatelist(){
            var _params = {
                'p':this.page,
                'pagesize':this.pagesize,
                'name':this.searchForm.name,
                'from':this.searchForm.from,
                'cate_one':this.searchForm.cateOne,
            }
            new Promise((resolve, reject) => {
                ProCatelist(_params).then(response => {
                   if(response.data.err == 0){
                       this.cateList = [];
                        this.listTotal = response.data.data.total;
                        response.data.data.list.forEach(function(value,index) {
                            var e = {
                                "name": value.name,
                                "parentName":value.p_name,
                                "origin":value.yun_id ? "本账号":"快保家",
                                "logo":value.logo,
                                "id":value.id,
                                "yun_id":value.yun_id
                            }
                            this.cateList.push(e);
                        }, this);  
                   } else {
                       this.$Message.error(response.data.info);
                   }                       
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        show (index) {
            if(this.cateList[index].yun_id != 1) {
                this.$Message.error("权限不足！");
            } else {
                var _params = {
                     "mongo_id" : this.cateList[index].id
                }
                this.getCateDetail(_params);
                this.showEdit = true;
            }
        },
        getCateDetail(params){
            new Promise((resolve, reject) => {  
                getCateDetail(params).then(response => {
                    let data = response.data;
                    if(data.err == 0){
                        this.cateEdit.name = data.data.name;
                        this.cateEdit.pid = data.data.pid;
                        this.cateEdit.logo = data.data.logo;
                        this.cateEdit.id = data.data.id;
                        this.cateEdit.yun_id = data.data.yun_id;
                        this.haveImage = this.cateEdit.logo ? true: false;
                    }                         
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        remove (index) {
            // this.data6.splice(index, 1);
            let params = {
                'yun_id':1,
                'mongo_id':this.cateList[index].id,
            }
            this.delCate(params);
        },
        clearEditData(){
            this.cateEdit.name = "";
            this.cateEdit.pid = "";
            this.cateEdit.logo = "";
            this.cateEdit.id = "";
            this.cateEdit.yun_id = "";
            this.haveImage = false;
        },
        ok() {
            this.saveCate(this.cateEdit); 
        },
        cancel() {
            this.showEdit = false
            this.clearEditData();
        },
        uploadImg(e) {
            let file = e.target.files[0]
            if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
                alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
                return false
            }
            let reader = new FileReader()
            reader.onload = (e) => {
                this.cateEdit.logo = e.target.result;
                this.haveImage =true;
            }
            reader.readAsDataURL(file)
        },
        getCateOne () {
            new Promise((resolve, reject) => {
                productCateOne().then(response => {
                    if(response.data.err==0){
                        this.cateOneAll = response.data.data                            
                    }                            
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        getCateOneById () {
            new Promise((resolve, reject) => {
                productCateOneById().then(response => {
                    if(response.data.err==0){
                        this.cateOne = response.data.data                            
                    }                            
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        saveCate(params){
            new Promise((resolve, reject) => {
                saveCate(params).then(response => {
                    if(response.data.err==0){
                         this.$Message.success(response.data.info);
                        this.getCatelist(1);
                    }else{
                        this.$Message.error(response.data.info);  
                    }                            
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        delCate(value){
            new Promise((resolve, reject) => {
                delCate(value).then(response => {
                    if(response.data.err==0){
                           this.$Message.success(response.data.info);     
                           this.getCatelist(1);                     
                    }else{
                        this.$Message.error(response.data.info);  
                    }                             
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
          pageChange(page) {
            this.page = page
            this.getCatelist()

        },
        pageSizeChange(pagesize) {
            this.pagesize = pagesize
            this.getCatelist()
        },
    }
};
</script>
